<template>
	<custom-header-vue :customTitle="customTitle" :backIcon="true" class="header" :right-view="false"
		:center-view="false">
		<!--    右边切换店铺-->
		<!-- <template v-slot:right> -->
			<!-- <view class="flex-row flex-ali-cen">
				<view class="flex-row flex-ali-cen">
					<view class="">
						<picker @change="bindPickerChange" :value="shopIndex"
							:range="shopList.map(item=>item.shop_alias)">
							<view class="f-s-28" style="color: #5697D7;">{{ shopList[shopIndex].shop_alias }}
							</view>
						</picker>
					</view>
					<uni-icons type="down" size="15" color="#5697D7"></uni-icons>
				</view>
			</view> -->
		<!-- </template> -->
		<!--    插槽自定义内容-->
		<template v-slot:custom>
			<view style="padding: 0 30rpx;padding-bottom: 20rpx;" class="flex-ali-cen">
			  <picker @change="bindPickerChange" :value="shopIndex"
			          :range="shopList.map(item=>item.shop_alias)">
			    <view class="flex-row flex-jus-bet" style="width: 100%;flex: 1">
			      <view class="flex-row">
			        <view class="f-s-28" style="color: var(--grey-text);">当前门店：</view>
			        <view class="f-s-28" style="color: var(--white-text);align-items: center;">
			          {{ shopList[shopIndex].shop_alias }}
			        </view>
			      </view>
			      <view class="flex-row">
			        <view class="f-s-28" style="color: #0A84FF;align-items: center">
			          切换门店
			        </view>
			        <view style="margin-left: 4rpx">
			          <uni-icons type="down" size="14" color="#0A84FF"></uni-icons>
			        </view>
			      </view>
			
			    </view>
			  </picker>
			</view>
			<view class="custom-search m-b-20">
				<input class="uni-input" :placeholder="placeholderInput"
					placeholder-style="font-size:28rpx;text-indent:26rpx" adjust-position="false" cursor="20"
					selection-start="20" v-model="keyword_search" style="color: var(--white-text)"
					@confirm="handleSearchClick" />
				<view class="sure-search" style="margin-left: 8rpx;" @click="handleSearchClick">搜索</view>
			</view>
			<view class="nav-wrap p-b-20">
				<view class="flex-row f-s-26 flex-ali-cen m-b-20 flex-1 p-l-10 p-r-10 flex-nowrap content-status"
					style="overflow-x: auto;">
					<view class="flex-row f-s-26 flex-jus-bet flex-ali-cen" v-for="(item,index) in roomStatusList"
						:key="index">
						<view class="flex-col flex-ali-cen flex-jus-cen p-t-10 p-b-10" @click="chooseStatus(item)"
							v-if="item.index!=-1" style="border-radius: 6rpx;width: 140rpx;"
							:style="{'color':roomStatusColor(item.index),'background':item.index==chooseRoomStatusIndex?'var(--input-bg)':''}">
							<view v-if="item.index==0">
								{{ roomStatistics.actual_number_tables }}+{{
                  roomAll.total_number - roomStatistics.actual_number_tables
                }}
							</view>
							<view v-else-if="item.index==1">{{ roomAll.empty_platform }}</view>
							<view v-else-if="item.index==2">{{ roomAll.predetermine }}</view>
							<view v-else-if="item.index==3">{{ roomAll.online }}</view>
							<view v-else-if="item.index==4">{{ roomAll.closed }}</view>
							<view v-else-if="item.index==5">{{ roomAll.outstanding }}</view>
							<view v-else>{{ roomAll.fault }}</view>
							<view class="p-t-6" v-if="item.index==0">{{ item.name }}({{ roomAll.total_number }})
							</view>
							<view class="p-t-6" v-else>{{ item.name }}</view>
						</view>
						<view class="header-field-title-split" v-else></view>
					</view>
				</view>

				<view class="flex-row p-l-30 p-r-30">
					<view class="flex-row flex-ali-cen type-area">
						<view class="flex-row flex-ali-cen">
							<view class="">
								<picker @change="bindPickerChangeTypeArea" :value="typeAreaIndex" :range="typeArea">
									<view class="f-s-26" style="color: #5697D7">{{ typeArea[typeAreaIndex] }}
									</view>
								</picker>
							</view>
							<uni-icons type="down" size="15" color="#5697D7"></uni-icons>
						</view>
					</view>
					<view class="list flex flex-1 m-l-10 ">
						<view v-for="(item, index) in list.type" :key="index" v-if="typeAreaIndex == 0"
							@click="chooseTypeArea(item,'type')"
							class="border-item u-line-1 flex flex-shrink m-r-18 f-s-26"
							:class="{'border-item-active':item.type_id == chooseTypeIndex}">
							{{ item.type_name }}
						</view>
						<view v-for="(item, index) in list.area" :key="index" v-if="typeAreaIndex == 1"
							@click="chooseTypeArea(item,'area')"
							class="border-item u-line-1 flex flex-shrink m-r-18 f-s-26"
							:class="{'border-item-active':item.area_id == chooseAreaIndex}">
							{{ item.area_name }}
						</view>
					</view>
				</view>
			</view>
		</template>
	</custom-header-vue>
	<scroll-view scroll-y :style="{'top':scrollTop,'height':scrollHeight}" class="scroll" :show-scrollbar="false"
		:refresher-background="bgColor" :refresher-threshold="80" @refresherrefresh="refresher" :refresher-triggered="triggered"
		:refresher-enabled="true">
		<view v-for="(item,index) in roomList" :key="index">
			<view class="flex-row flex-ali-cen flex-jus-bet f-s-24 p-l-10 p-r-10"
				style="height: 60rpx;background: var(--bg-center-color);border-radius: 6rpx">
				<view class="flex-row flex-ali-cen">
					<view class="f-s-28" style="font-weight: 600;color: var(--white-text);">
						{{ typeAreaIndex == 0 ? item.type_name : item.area_name }}
					</view>
					<view class="m-l-20" style="color: var(--grey-text)">总计{{ item.total_number }}</view>
				</view>
				<view class="flex-row">
					<view style="color: rgb(104 112 215)">空台{{ item.empty_platform }}</view>
					<view class="m-l-10" style="color: rgb(31,210,157)">预定{{ item.predetermine }}</view>
					<view class="m-l-10" style="color:rgb(254, 193, 53)">未结{{ item.outstanding }}</view>
					<view class="m-l-10" style="color: rgb(250, 82, 82)">已结{{ item.closed }}</view>
					<view class="m-l-10" style="color:rgb(152, 111, 219)">锁台{{ item.online }}</view>
					<view class="m-l-10" style="color:var(--grey-text)">故障{{ item.fault }}</view>
				</view>
			</view>
			<view class="flex-row flex-wrap m-t-10">
				<view class="room" v-for="(room,index1) in item.items" :key="index1"
					:class="getRoomClass(room.room_status)" @click="showRoomDetail(room)">
					<view :class="{'room-name-active':room.room_status!=1 && room.room_status!=6}"
						class="f-s-28 room-name text-line" style="height: 50rpx;text-align: center;line-height: 50rpx">
						{{ room.room_name }}
					</view>
					<view class="line-split p-l-6 p-r-6" :style="{'background': getRoomSplitBg(room.room_status)}">
					</view>
					<view v-if="room.room_status==2||room.room_status==3||room.room_status==4||room.room_status==5"
						class="p-l-10 p-r-10">
						<view class="flex-col flex-jus-cen" style="height: 100rpx;">
							<view class="flex-row flex-jus-bet flex-ali-cen flex-nowrap">
								<view class="f-s-22 room-name-active text-line">
									{{ room.customer_name || '贵宾' }}({{ room.prebook_num }}人)
								</view>
								<view v-if="room.member_id>0" class="flex-row flex-shrink f-s-20 flex-ali-cen"
									style="background-color: rgb(255 174 90);padding: 4rpx 12rpx 4rpx 8rpx;border-radius:6rpx;color: #fff;">
									<uni-icons type="vip-filled" size="12" color="#fff"></uni-icons>
									<view class="m-l-4">会员</view>
								</view>
								<view v-else class="flex flex-shrink f-s-20"
									style="background-color: rgb(179 179 179);padding: 4rpx 8rpx 4rpx 8rpx;border-radius:6rpx;color: #fff;">
									非会员
								</view>
							</view>
							<view class="f-s-22 room-name-active m-t-10">
								{{ room.customer_phone ? $commonJs.hidePhoneNumber(room.customer_phone) : '缺失电话' }}
							</view>
						</view>
						<view class="flex-row flex-jus-bet f-s-22 room-name-active flex-nowrap"
							style="height: 40rpx;line-height: 40rpx">
							<view class="text-line">总 {{ $commonJs.formatNumber(room.total_money) || 0 }}</view>
							<view class="text-line">实 {{ $commonJs.formatNumber(room.receipt_money) || 0 }}</view>
						</view>
						<view class="flex-row flex-jus-bet f-s-22 room-name-active flex-nowrap"
							style="height: 40rpx;line-height: 40rpx">
							<view class="text-line">押 {{ $commonJs.formatNumber(room.surplus_money) || 0 }}</view>
							<view class="text-line">低 {{ $commonJs.formatNumber(room.low_consumption) || 0 }}</view>
						</view>

						<view class="flex-row flex-jus-bet f-s-22 room-name-active flex-nowrap "
							style="height: 40rpx;line-height: 40rpx">
							<view class="text-line">未 {{ $commonJs.formatNumber(room.unclosed_money) || 0 }}</view>
							<view class="text-line" style="text-align: center"
								v-if="room.room_status==2 || room.room_status==3">
								{{ formatDate(room.prebook_time) || '00/00 00:00' }}
							</view>
							<view class="text-line" style="text-align: center" v-else>{{
                  formatDate(room.book_time) || '00/00 00:00'
                }}
							</view>
						</view>
						<view class="f-s-22 room-name-active " style="height: 40rpx;line-height: 40rpx">
							<view class="text-line">{{ room.salesman_name }}({{ room.depart_name || '未分部门' }})</view>
						</view>
					</view>
					<view v-else-if="room.room_status==1" style="height: calc(100% - 50rpx)"
						class="flex-col flex-1 flex-ali-cen flex-jus-cen">
						<view class="f-s-24" style="color: var(--grey-text)">空台</view>
					</view>
					<view v-else-if="room.room_status==6" style="height: calc(100% - 50rpx)"
						class="flex-col flex-1 flex-ali-cen flex-jus-cen">
						<view class="f-s-24" style="color: var(--grey-text)">故障</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
	<!-- 明细内容 -->
	<view style="position: absolute;z-index: 101;   ">
		<uni-popup ref="popupRoomDetail" type="bottom" :background-color="bgColor" :borderRadius="popupBorder">
			<scroll-view class="scroll-performance-detail" scroll-y :show-scrollbar="false">
				<view class="detail-title-performance flex-nowrap">
					<view class="flex flex-1 text-line" :style="{'color':roomStatusColor(chooseRoom.room_status)}"
						style="font-size: 28rpx;text-align: center;">
						{{ chooseRoom.room_name }}{{ getRoomStatusName(chooseRoom.room_status) }}
					</view>
					<view v-if="chooseRoom.room_status == 2 || chooseRoom.room_status == 3"
						class="f-s-28 flex flex-1 flex-jus-cen text-line" style="color: var(--white-text)">房台详情
					</view>
					<view v-else class="f-s-28 flex flex-1 flex-jus-cen text-line" style="color: var(--white-text)">
					</view>
					<view class="flex flex-1 flex-jus-end"
						style="color: var(--grey-text);font-size: 28rpx;justify-content: flex-end;"
						@click="closeRoom()">
						关闭
					</view>
				</view>
				<view class="p-l-30 p-r-30 m-t-80 p-t-30 p-b-30" style="height: 100%;"
					v-if="chooseRoom.room_status == 2 || chooseRoom.room_status == 3">
					<view style="background: var(--bg-center-color);height: 100%;border-radius: 10rpx;">
						<view class="p-t-30 f-s-28 flex-row flex-ali-cen flex-jus-bet p-l-20 p-r-20">
							<view :style="{'color':roomStatusColor(chooseRoom.room_status)}" style="font-weight: 600;">
								{{ chooseRoom.prebook_sn }}
							</view>
						</view>
						<view class="line-split m-t-30"></view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-t-30 p-l-20 p-r-20">
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">所属区域：</view>
								<view class="f-s-26" style="color: var(--white-text);">{{ chooseRoom.area_name }}</view>
							</view>
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">所属类型：</view>
								<view class="f-s-26" style="color: var(--white-text);">{{ chooseRoom.type_name }}</view>
							</view>
						</view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-t-30 p-l-20 p-r-20">
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">客户名称：</view>
								<view class="f-s-26" style="color: var(--white-text);">
									{{ chooseRoom.customer_name || '贵宾' }}
								</view>
							</view>
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">客户电话：</view>
								<view class="f-s-26" style="color: var(--white-text);">
									{{ chooseRoom.customer_phone || '未录入' }}
								</view>
							</view>
						</view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-t-30 p-l-20 p-r-20">
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">订台来源：</view>
								<view class="f-s-26" style="color: var(--white-text);">{{ fromName(chooseRoom.from) }}
								</view>
							</view>
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">订台销售：</view>
								<view class="f-s-26" style="color: var(--white-text);">
									{{ chooseRoom.salesman_name || '自来客' }}
								</view>
							</view>
						</view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-t-30 p-l-20 p-r-20">
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">预定人数：</view>
								<view class="f-s-26" style="color: var(--white-text);">{{ chooseRoom.prebook_num }}
								</view>
							</view>
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">缴纳押金：</view>
								<view class="f-s-26" style="color: var(--white-text);">
									{{ chooseRoom.deposit_money || '0.00' }}
								</view>
							</view>
						</view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-t-30 p-l-20 p-r-20">
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">实际桌台：</view>
								<view class="f-s-26" style="color: var(--white-text);">
									{{ chooseRoom.is_true == 1 ? '是' : '否' }}
								</view>
							</view>
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">业绩比例：</view>
								<view class="f-s-26" style="color: var(--white-text);">
									{{ chooseRoom.achievement_ratio || 0 }}%
								</view>
							</view>
						</view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-t-30 p-l-20 p-r-20 p-b-30">
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">操作人：</view>
								<view class="f-s-26" style="color: var(--white-text);">
									{{ chooseRoom.operator_name }}
								</view>
							</view>
							<view class="flex-row">
								<view class="f-s-26" style="color: var(--grey-text);">预定时间：</view>
								<view class="f-s-26" style="color: var(--white-text);">
									{{ timestampToTime(chooseRoom.pre_time) }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="m-t-80 p-t-20 p-b-20" v-else>
					<view class="flex-col">
						<view @click="goGoods()" class="f-s-28"
							style="height: 88rpx;line-height: 88rpx;text-align: center;background: var(--bg-center-color);letter-spacing: 4rpx">
							前往点单
						</view>
						<view class="line-split"></view>
						<view @click="goRoomCheck()" class="f-s-28"
							style="height: 88rpx;line-height: 88rpx;text-align: center;background: var(--bg-center-color);letter-spacing: 4rpx">
							查看消费
						</view>
						<view class="line-split"></view>
						<view @click="goRoomRecord()" class="f-s-28"
							style="height: 88rpx;line-height: 88rpx;text-align: center;background: var(--bg-center-color);letter-spacing: 4rpx">
							巡台记录
						</view>
						<view class="line-split"></view>
						<view @click="goSend()" class="f-s-28"
							style="height: 88rpx;line-height: 88rpx;text-align: center;background: var(--bg-center-color);letter-spacing: 4rpx">
							前往签送
						</view>
					</view>

				</view>
			</scroll-view>
		</uni-popup>
	</view>

	<!-- 签送选择 -->
	<view style="position: absolute;z-index: 101;   ">
		<uni-popup ref="popupSendDetail" type="bottom" :background-color="bgColor" :borderRadius="popupBorder">
			<scroll-view class="scroll-performance-detail" scroll-y :show-scrollbar="false">
				<view class="detail-title-performance flex-nowrap">
					<view class="flex flex-1 text-line" style="font-size: 28rpx;text-align: center;">
						签送方案选择
					</view>
					<view class="flex flex-1 flex-jus-end" style="color: var(--grey-text);font-size: 28rpx;"
						@click="closeSend()">
						关闭
					</view>
				</view>
				<view class="m-t-80 p-t-30 p-b-30 p-l-20 p-r-20">
					<view style="background: var(--bg-center-color);border-radius: 10rpx">
						<view class="flex-row flex-ali-cen flex-jus-bet p-l-10 p-r-10"
							style="height: 76rpx;line-height: 76rpx">
							<view class="f-s-28" style="color: rgb(86, 151, 215)">金额签送</view>
							<view @click="typeSend(2)" class="f-s-26 p-l-20 p-r-20"
								style="color: #ffffff;background: rgb(86, 151, 215);height: 55rpx;line-height: 55rpx;border-radius: 10rpx">
								去签送
							</view>
						</view>
						<view class="line-split"></view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-l-20 p-r-20 f-s-26"
							style="height: 70rpx;line-height: 70rpx">
							<view class="" style="color: var(--grey-text)">月限额：
								<text style="color: var(--white-text)">{{
                    $commonJs.formatNumber(sendGoodsList.max_money_month) || 0
                  }}
								</text>
							</view>
							<view style="color: var(--grey-text)">月已签：
								<text style="color: var(--white-text)">{{
                    $commonJs.formatNumber(sendGoodsList.used_money_month) || 0
                  }}
								</text>
							</view>
							<view style="color: var(--grey-text)">月可签：
								<text style="color: var(--white-text)">{{
                    $commonJs.formatNumber(sendGoodsList.can_use_money_month) || 0
                  }}
								</text>
							</view>
						</view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-l-20 p-r-20 f-s-26"
							style="height: 70rpx;line-height: 70rpx">
							<view class="" style="color: var(--grey-text)">日限额：
								<text style="color: var(--white-text)">{{
                    $commonJs.formatNumber(sendGoodsList.max_money_day) || 0
                  }}
								</text>
							</view>
							<view style="color: var(--grey-text)">日已签：
								<text style="color: var(--white-text)">{{
                    $commonJs.formatNumber(sendGoodsList.used_money_day) || 0
                  }}
								</text>
							</view>
							<view style="color: var(--grey-text)">日可签：
								<text style="color: var(--white-text)">{{
                    $commonJs.formatNumber(sendGoodsList.can_use_money_day) || 0
                  }}
								</text>
							</view>
						</view>
					</view>
					<view class="m-t-30" style="background: var(--bg-center-color);border-radius: 10rpx"
						v-if="sendGoodsList.sign_goods.length>0">
						<view class="flex-row flex-ali-cen flex-jus-bet p-l-10 p-r-10"
							style="height: 76rpx;line-height: 76rpx">
							<view class="f-s-28" style="color: rgb(86, 151, 215)">数量签送</view>
							<view @click="typeSend(1)" class="f-s-26 p-l-20 p-r-20"
								style="color: #ffffff;background: rgb(86, 151, 215);height: 55rpx;line-height: 55rpx;border-radius: 10rpx">
								去签送
							</view>
						</view>
						<view class="line-split"></view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-l-20 p-r-20 f-s-26"
							style="height: 70rpx;line-height: 70rpx">
							<view style="color: var(--grey-text);width: 50%">签送物品</view>
							<view style="color: var(--grey-text);width: 10%">规格</view>
							<view class="flex flex-jus-end" style="color: var(--grey-text);width: 20%">月可签</view>
							<view class="flex flex-jus-end" style="color: var(--grey-text);width: 20%">日可签</view>
						</view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-l-20 p-r-20 f-s-26"
							style="height: 60rpx;line-height: 60rpx" v-for="(item,index) in sendGoodsList.sign_goods"
							:key="index">
							<view class="text-line" style="color: var(--grey-text);width: 50%">{{ item.specs_name }}
							</view>
							<view style="color: var(--grey-text);width: 10%">{{ item.specs_unit }}</view>
							<view class="flex flex-jus-end" style="color: var(--white-text);width: 20%">
								{{ $commonJs.formatNumber(item.month_delay_number) || 0 }}
							</view>
							<view class="flex flex-jus-end" style="color: var(--white-text);width: 20%">
								{{ $commonJs.formatNumber(item.day_delay_number) || 0 }}
							</view>
						</view>
						<view class="f-s-24"
							style="height: 60rpx;line-height: 60rpx;text-align: center;color: var(--grey-text)"
							v-if="sendGoodsList.sign_goods.length>=5">
							*更多可签送物品，点击《去签送》查看
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
	<custom-loading-vue ref="loading"></custom-loading-vue>
</template>

<script>
	import customHeaderVue from '@/components/customHeader.vue'
	import bottomCompanyVue from '@/components/bottomCompany.vue'
	import customLoadingVue from '@/components/customLoading.vue'

	export default {
		components: {
			customHeaderVue,
			bottomCompanyVue,
			customLoadingVue
		},
		data() {
			return {
				customTitle: '实时桌态',
				bgColor: 'var(--bg-color)',
				scrollTop: '0',
				scrollHeight: '0',
				footerStyle: {
					position: 'absolute',
					bottom: '20rpx',
					left: 0
				},
				popupBorder: "20px 20px 20px 20px",
				keyword_search: '',
				typeArea: ['按类型', '按区域'],
				roomStatusList: [{
						name: '全部',
						index: 0
					},
					{
						name: 'line',
						index: -1
					},
					{
						name: '空台',
						index: 1
					},
					{
						name: 'line',
						index: -1
					},
					{
						name: '预定',
						index: 2
					},
					{
						name: 'line',
						index: -1
					},
					{
						name: '未结',
						index: 5
					},
					{
						name: 'line',
						index: -1
					},
					{
						name: '已结',
						index: 4
					},
					{
						name: 'line',
						index: -1
					},
					{
						name: '锁台',
						index: 3
					},
					{
						name: 'line',
						index: -1
					},
					{
						name: '故障',
						index: 6
					}
				],
				chooseRoomStatusIndex: 0,
				typeAreaIndex: 0,
				chooseTypeIndex: 0,
				chooseAreaIndex: 0,
				list: {
					type: [],
					area: []
				},
				userInfo: this.$commonJs.getUserInfo(),
				groupInfo: this.$commonJs.getGroupInfo(),
				loadStatus: false,
				storageInfo: this.$commonJs.getStorageSize(),
				systemInfo: this.$commonJs.getSystemInfoSync(),
				shopIndex: this.$commonJs.getChooseShopIndex(),
				shopList: this.$commonJs.getShopList(),
				currentDate: '', // 当前显示的日期
				placeholderInput: '输入桌台号进行检索',
				roomAll: {
					"total_number": 0,
					"total_true_number": 0,
					"empty_platform": 0,
					"predetermine": 0,
					"online": 0,
					"closed": 0,
					"outstanding": 0,
					"fault": 0
				},
				roomStatistics: {
					"actual_number_tables": 0,
					"actual_open_quantity": 0,
					"actual_empty_platform": 0,
					"predetermine": 0,
					"open_rate": 0,
					"rocker_num": 0
				},
				roomList: [],
				chooseRoom: {},
				triggered: false,
				sendGoodsList: {}
			}
		},

		mounted() {
			this.getRoomList()
			const query = uni.createSelectorQuery().in(this)
			const self = this
			query.select(".header")
				.boundingClientRect((data) => {
					self.scrollTop = data.height + 15 + 'px'
					let topHeight = data.height + 15 + 'px'
					self.scrollHeight = `calc(100vh - ${topHeight})`
				})
				.exec();
		},
		onLoad() {
			this._freshing = false
		},
		onShow() {
			this.currentToday()
		},
		methods: {
			goSend() {
				const self = this
				uni.vibrateShort({
					success: function() {
						if (self.chooseRoom && Object.keys(self.chooseRoom).length > 0) {
							self.$refs.popupRoomDetail.close()
							self.getSendGoods()
							// uni.navigateTo({
							//   url: '/pages/application/send_goods?roomInfo=' + JSON.stringify(self.chooseRoom)
							// })
						} else {
							self.$commonJs.showMessage('未找到房台信息，请重试！')
						}
					},
					fail: function(err) {
						self.$commonJs.showMessage('调用失败！')
					}
				})
			},
			typeSend(status) {
				this.$refs.popupSendDetail.close()
				uni.navigateTo({
					url: '/pages/application/send_goods?roomInfos=' + JSON.stringify(this.chooseRoom) + '&type=' +
						status + '&signLists=' + JSON.stringify(this.sendGoodsList)
				})
			},
			closeSend() {
				this.$refs.popupSendDetail.close()
			},
			goRoomRecord() {
				this.$commonJs.showMessage('巡台记录暂未开放！')
			},
			goRoomCheck() {
				this.$commonJs.showMessage('消费记录查看未开放！')
			},
			goGoods() {
				this.$commonJs.showMessage('商品点单暂未开放！')
			},
			refresher(e) {
				const self = this
				uni.vibrateShort({
					success: function() {
						if (self._freshing) return;
						self._freshing = true
						self.triggered = true
						self.resetPage()
						self.getRoomList()
					},
					fail: function(err) {
						self.$commonJs.showMessage('调用失败！')
					}
				})

			},
			formatDate(dateString) {
				// 将字符串转换为日期对象
				const date = new Date(dateString.replace(/-/g, '/')); // 替换 '-' 为 '/' 以兼容浏览器

				// 提取月、日、小时、分钟
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1，并确保为两位数
				const day = String(date.getDate()).padStart(2, '0'); // 确保日期为两位数
				const hours = String(date.getHours()).padStart(2, '0'); // 确保小时为两位数
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 确保分钟为两位数

				// 格式化为 MM/DD HH:mm 格式
				return `${hours}:${minutes}`;
			},
			getRoomStatusName(status) {
				switch (status) {
					case 1:
						return '空台';
					case 2:
						return '预定';
					case 3:
						return '锁台';
					case 4:
						return '消费';
					case 5:
						return '消费';
					case 6:
						return '故障';
					default:
						return '空台';
				}
			},
			timestampToTime(timestamp) {
				const date = new Date(timestamp * 1000);
				const hours = String(date.getHours()).padStart(2, '0'); // 获取小时并补齐两位
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 获取分钟并补齐两位
				return `${hours}:${minutes}`; // 返回格式化后的时分
			},
			roomStatusColor(index) {
				switch (index) {
					case 1:
						return 'rgb(104 112 215)';
					case 2:
						return '#1fd29d';
					case 3:
						return 'rgb(152, 111, 219)';
					case 4:
						return 'rgb(250, 82, 82)';
					case 5:
						return 'rgb(254, 193, 53)';
					default:
						return 'var(--grey-text)';
				}
			},
			closeRoom() {
				this.$refs.popupRoomDetail.close()
			},
			showRoomDetail(item) {
				this.chooseRoom = item
				const self = this
				uni.vibrateShort({
					success: function() {
						if (item.room_status == 1 || item.room_status == 6) {
							let msg = item.room_status == 1 ? '此桌台当前是空台状态！' : '此桌台当前是故障状态！'
							self.$commonJs.showMessage(msg)
							return
						}
						self.$refs.popupRoomDetail.open()
					},
					fail: function(err) {
						self.$commonJs.showMessage('调用失败！')
					}
				})
			},
			chooseStatus(item) {
				const self = this
				uni.vibrateShort({
					success: function() {
						self.chooseRoomStatusIndex = item.index
						self.getRoomList()
					},
					fail: function(err) {
						self.$commonJs.showMessage('调用失败！')
					}
				})
			},
			chooseTypeArea(item, status) {
				const self = this
				uni.vibrateShort({
					success: function() {
						if (status == 'type') {
							self.chooseTypeIndex = item.type_id
						}
						if (status == 'area') {
							self.chooseAreaIndex = item.area_id
						}
						self.getRoomList()
					},
					fail: function(err) {
						self.$commonJs.showMessage('调用失败！')
					}
				})

			},
			resetPage() {
				this.typeAreaIndex = 0
				this.chooseTypeIndex = 0
				this.chooseAreaIndex = 0
				this.chooseRoomStatusIndex = 0
				this.keyword_search = ''
				this.currentToday()
			},
			decDate() {
				const self = this
				uni.vibrateShort({
					success: function() {
						let today = self.todayDate()
						if (today >= self.currentDate) {
							self.$commonJs.showMessage('已是可预定的最小日期')
							return
						} else {
							let today1 = new Date(self.currentDate)
							today1.setDate(today1.getDate() - 1)
							self.currentDate = today1.toISOString().split('T')[0]
							self.getRoomList()
							return
						}
					},
					fail: function(err) {
						self.$commonJs.showMessage('调用失败！')
					}
				})
			},
			addDate() {
				const self = this
				uni.vibrateShort({
					success: function() {
						let today1 = new Date(self.currentDate)
						today1.setDate(today1.getDate() + 1)
						self.currentDate = today1.toISOString().split('T')[0]
						self.getRoomList()
					},
					fail: function(err) {
						self.$commonJs.showMessage('调用失败！')
					}
				})
			},
			bindPickerChangeTypeArea(e) {
				this.resetPage()
				this.typeAreaIndex = e.detail.value
				this.getRoomList()
			},
			/**
			 * 门店切换
			 * @param e
			 */
			bindPickerChange(e) {
				const self = this
				if (e.detail.value >= 0) {
					self.shopIndex = e.detail.value
					self.$commonJs.systemConfig.shopIndex = e.detail.value
					self.$commonJs.setStorage(
						'shopIndex',
						e.detail.value,
						function() {
							self.$commonJs.logger.debug('设置门店成功！')
							self.resetPage()
							self.getRoomList()
						}
					)
				}
			},

			/**
			 * 确认检索
			 * @param {Object} e
			 */
			handleSearchClick(e) {
				this.getRoomList()
			},

			/**
			 * 当前日期
			 */
			currentToday() {
				this.currentDate = this.todayDate()
			},

			todayDate() {
				let today = new Date()
				let utcOffset = 8 * 60 * 60 * 1000
				let todayInBeijing = new Date(today.getTime() + utcOffset)
				let newTodayInBeijing = new Date(todayInBeijing.getTime() - 12 * 60 * 60 * 1000)
				let todayNow = newTodayInBeijing.toISOString().split('T')[0]
				let today1 = new Date(todayNow)
				today1.setDate(today1.getDate() + 1)
				return today1.toISOString().split('T')[0]
			},

			/**
			 * 获取签送物品
			 */
			getSendGoods() {
				const self = this
				const params = {
					phone: self.userInfo.phone
				}
				this.$commonJs.queryCache('/admin/staff/getStaffSignOffGoods', params, {
					before() {
						self.$refs.loading.show()
					},
					success(res) {
						try {
							const {
								code,
								data,
								msg,
								server_ip
							} = res
							if (data.can_use_money_day == 0 && can_use_money_month == 0 && data.sign_goods
								.length == 0) {
								self.$commonJs.showMessage('未查询到有签送商品')
							} else {
								if (data.sign_goods.length > 5) {
									data.sign_goods = data.sign_goods.slice(0, 5)
								}
								self.sendGoodsList = data
								self.$refs.popupSendDetail.open()
							}
						} catch (error) {
							//TODO handle the exception
							self.$commonJs.showMessage(error)
						}
					},
					fail(err) {
						self.$commonJs.logger.debug(err, 'error')
					},
					complete() {
						self.$refs.loading.hide()
					}
				}, {
					"X-Merchant-ID": self.shopList[self.shopIndex].shop_id
				})
			},

			/**
			 * 获取房台列表
			 */
			getRoomList() {
				const typeAll = [{
					type_id: 0,
					type_name: "所有类型"
				}]
				const areaAll = [{
					area_id: 0,
					area_name: "所有区域"
				}]
				let types = 'type'
				let types_id = 0
				if (this.typeAreaIndex == 0) {
					types = 'type'
					types_id = this.chooseTypeIndex
				}
				if (this.typeAreaIndex == 1) {
					types = 'area'
					types_id = this.chooseAreaIndex
				}

				const self = this
				const params = {
					keyword: self.keyword_search,
					select: 0,
					sort_status: "asc",
					sort_type: "all",
					status_type: self.chooseRoomStatusIndex,
					types,
					types_id
				}
				this.$commonJs.queryCache('/admin/room/getRoomList', params, {
					before() {
						self.$refs.loading.show()
					},
					success(res) {
						try {
							const {
								code,
								data,
								msg,
								server_ip
							} = res
							if (data.hasOwnProperty('roomType') && data.hasOwnProperty('roomArea')) {
								self.list['type'] = [...typeAll, ...data.roomType]
								self.list['area'] = [...areaAll, ...data.roomArea]
							}
							if (data.hasOwnProperty('roomStatistics') && data.hasOwnProperty('roomAll')) {
								self.roomAll = data.roomAll
								self.roomStatistics = data.roomStatistics
							}
							if (data.hasOwnProperty('roomList')) {
								self.roomList = data.roomList
							}
						} catch (error) {
							//TODO handle the exception
							self.$commonJs.showMessage(error)
						}
					},
					fail(err) {
						self.$commonJs.logger.debug(err, 'error')
					},
					complete() {
						setTimeout(() => {
							self.$refs.loading.hide()
							self.triggered = false
							self._freshing = false
						}, 500)
					}
				}, {
					"X-Merchant-ID": self.shopList[self.shopIndex].shop_id
				})
			},

			/**
			 * 获取房台状态颜色
			 * @param status
			 * @return {string}
			 */
			getRoomClass(status) {
				switch (status) {
					case 1:
						return 'room-empty';
					case 2:
						return 'room-pre';
					case 3:
						return 'room-online';
					case 4:
						return 'room-close';
					case 5:
						return 'room-wj';
					case 6:
						return 'room-default';
					default:
						return 'room-empty';
				}
			},

			/**
			 * 分割线背景
			 * @param status
			 * @return {string}
			 */
			getRoomSplitBg(status) {
				switch (status) {
					case 1:
						return 'var(--room-split-line)';
					case 2:
						return 'rgb(166 229 197)';
					case 4:
						return 'rgb(233 159 159)';
					case 5:
						return 'rgb(227 214 195)';
					case 3:
						return 'rgb(227 214 195)';
					case 6:
						return 'var(--room-split-line)';
					default:
						return 'var(--line-color)';
				}
			},

			fromName(from) {
				switch (from) {
					case 1:
						return '销售订桌';
					case 2:
						return '散客订桌';
					case 3:
						return '美团订桌';
					case 4:
						return '抖音订桌';
					case 5:
						return '合作商订桌';
					case 6:
						return '小程序订桌';
					default:
						return '预开台';
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.text-line {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.room-empty {
		background: var(--bg-center-color);
	}

	.room-pre {
		background: #1fd29d;
	}

	.room-wj {
		background: rgb(254, 193, 53);
	}

	.room-close {
		background: rgb(250, 82, 82);
	}

	.room-online {
		background: rgb(152, 111, 219);
	}

	.room-default {
		background: var(--bg-center-color);
	}

	.detail-title-performance {
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		position: fixed;
		top: 0;
		z-index: 102;
		background-color: var(--bg-center-color);
		box-sizing: border-box;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.room-name {
		color: var(--grey-text);
	}

	.room-name-active {
		color: #ffffff;
	}

	.room {
		width: calc((100% - 20rpx) / 3);
		margin: 0 10rpx 10rpx 0;
		//height: calc((100vw - 20rpx) / 3);
		border-radius: 10rpx;
		height: 320rpx;
	}


	.room:nth-child(3n) {
		margin-right: 0;
	}

	.scroll {
		position: absolute;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.header-field-title-split {
		height: 30rpx;
		width: 2rpx;
		background: var(--white-text);
		transform-origin: top left;
		transform: scaleX(0.3);
	}

	.content-status::-webkit-scrollbar {
		height: 0;
		display: none;
	}

	.nav-wrap {

		// background-color: rgba(32, 208, 238, 0.1);
		.list {
			overflow-x: auto;
			/* 启用滚动 */
		}

		.list::-webkit-scrollbar {
			height: 0;
			display: none;
		}

		.item {
			padding: 0 12rpx;
			text-align: center;
		}

		.border-item {
			padding: 4rpx 12rpx;
			text-align: center;
			border: 1px solid transparent;
			border-radius: 10rpx;
			color: var(--grey-text);
		}

		.border-item-active {
			background: var(--room-type-bg);
			color: var(--black-color);
		}

		.u-line-1 {
			display: -webkit-box !important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical !important;
		}
	}

	.dec-date {
		height: 54rpx;
		background-color: #0A84FF;
		width: 60rpx;
		text-align: center;
		align-items: center;
		color: #ffffff;
		border-top-left-radius: 12rpx;
		border-bottom-left-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dec-date-active {
		background-color: #0A84FF;
	}

	.add-date {
		height: 54rpx;
		background-color: #0A84FF;
		width: 60rpx;
		text-align: center;
		align-items: center;
		color: #ffffff;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.date-display {
		width: 170rpx;
		height: 54rpx;
		line-height: 54rpx;
		background-color: var(--bg-center-color);
		font-size: 30rpx;
		text-align: center;
		color: var(--white-text)
	}

	.custom-search {
		flex: 1;
		display: flex;
		flex-direction: row;
		height: 70rpx;
		line-height: 70rpx;
		align-items: center;
		padding: 0 30rpx 0 30rpx;
	}

	.uni-input-feild {
		background-color: var(--input-bg);
		border-radius: 10rpx;
		width: 180rpx;
		display: flex;
		height: 55rpx;
		line-height: 55rpx;
		flex: 1;
		text-indent: 20rpx;
		font-size: 24rpx;
		margin: 0 10rpx;
	}

	.uni-input {
		background-color: var(--input-bg);
		border-radius: 35rpx;
		width: 100%;
		display: flex;
		height: 60rpx;
		flex: 1;
		text-indent: 30rpx;
	}

	.sure-search {
		font-size: 28rpx;
		color: var(--grey-text);
	}
</style>